<template>
	<div class="typography">
		<table class="demo-typo-size">
			<tbody>
				<tr>
					<td>Level</td>
					<td>Font Size</td>
					<td class="color-dark-light">Demo</td>
				</tr>
				<tr v-for="(fontSize, i) in fontSizes" :key="i"
					:style="`font-size: var(--el-font-size-${fontSize.type})`">
					<td>{{ fontSize.level }}</td>
					<td>{{ fontSize.size + ' ' + formatType(fontSize.type) }}</td>
					<td>Build with Element</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>
<script setup>
	import {
		ref
	} from 'vue'
	let fontSizes = ref([{
				level: 'Supplementary text',
				type: 'extra-small',
				size: '12px',
			},
			{
				level: 'Body (small)',
				type: 'small',
				size: '13px',
			},
			{
				level: 'Body',
				type: 'base',
				size: '14px',
			},
			{
				level: 'Small Title',
				type: 'medium',
				size: '16px',
			},
			{
				level: 'Title',
				type: 'large',
				size: '18px',
			},
			{
				level: 'Main Title',
				type: 'extra-large',
				size: '20px',
			},
		]),
		formatType = type => {
			return type
				.split('-')
				.map((item) => item.charAt(0).toUpperCase() + item.slice(1))
				.join(' ')
		}
</script>
<style lang="scss" scoped>
	.typography {}
</style>
